<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品搜索" prop="skuName">
        <el-input v-model="queryParams.skuName" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['manage:sku:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['manage:skuClass:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Download" @click="handleDelete" v-hasPermi="['manage:sku:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['manage:sku:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['manage:sku:import']">导入</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="skuList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="商品名称" align="center" prop="skuName" />
      <el-table-column label="商品图片" align="center" prop="skuImage" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.skuImage" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="品牌" align="center" prop="brandName" />
      <el-table-column label="规格" align="center" prop="unit" />
      <el-table-column label="商品价格" align="center" prop="price">
        <template #default="{ row }">
          <el-tag>{{ row.price / 100 }}元</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" align="center" prop="classId">
        <template #default="{ row }">
          <div v-for="item in skuClassList" :key="item.classId">
            <span v-if="item.classId === row.classId">{{ item.className }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="info" @click="handleUpdate(scope.row)" v-hasPermi="['manage:sku:edit']">修改</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['manage:sku:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改商品管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="skuRef" :model="form" :rules="rules" label-width="84px">
        <el-form-item label="商品名称" prop="skuName">
          <el-input v-model="form.skuName" placeholder="请输入商品名称" class="input-width" />
        </el-form-item>
        <el-form-item label="品牌" prop="brandName">
          <el-input v-model="form.brandName" placeholder="请输入品牌" class="input-width" />
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number v-model="form.price" size="small" :min="0.01" :max="999.99" :precision="2" :step="0.5" placeholder="请输入" />
          <span style="margin-left: 10px">元</span>
        </el-form-item>
        <el-form-item label="商品类型" prop="classId">
          <el-select v-model="form.classId" placeholder="请选择商品类型" class="select-width">
            <el-option v-for="item in skuClassList" :key="item.classId" :label="item.className" :value="item.classId" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入规格" class="input-width" />
        </el-form-item>
        <el-form-item label="商品图片" prop="skuImage">
          <image-upload v-model="form.skuImage" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="padding-top: 0">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 上传Excel文件对话框 -->
    <el-dialog :title="title" v-model="showImportSku" width="500px" append-to-body>
      <el-upload
        drag
        ref="uploadRef"
        :action="uploadExcelUrl"
        :headers="headers"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :before-upload="handleBeforeUpload"
        :limit="1"
        :auto-upload="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖放到此处或<em>单击上传</em></div>
        <template #tip>
          <div class="el-upload__tip"> xls/xlxs files with a size less than 1024kb </div>
        </template>
      </el-upload>
      <div style="display: flex; justify-content: flex-end; padding-bottom: 10px">
        <el-button @click="cancel">取消</el-button>
        <el-button type="success" @click="submitUpload">上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Sku">
  import { listSku, getSku, delSku, addSku, updateSku } from '@/api/manage/sku';
  import { listSkuClass } from '@/api/manage/skuClass';
  import { parseTime } from '@/utils/ruoyi';
  import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
  import { getToken } from '@/utils/auth';
  import { UploadInstance } from 'element-plus';

  const { proxy } = getCurrentInstance() as any;

  const skuList = ref([]);
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref('');

  const data = reactive({
    form: {} as any,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      skuName: null,
      classId: null
    } as any,
    rules: {
      skuName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
      skuImage: [{ required: true, message: '商品图片不能为空', trigger: 'blur' }],
      brandName: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
      unit: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
      price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
      classId: [{ required: true, message: '商品类型不能为空', trigger: 'blur' }]
    }
  });

  const { queryParams, form, rules } = toRefs(data);

  /** 查询商品管理列表 */
  function getList() {
    loading.value = true;
    listSku(queryParams.value).then((response: any) => {
      skuList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }

  /** 查询商品类型列表 */
  const skuClassList = ref<any[]>([]);
  function getSkuClassList() {
    loading.value = true;
    listSkuClass(queryParams.value).then((response: any) => {
      skuClassList.value = response.rows;
      loading.value = false;
    });
  }

  // 取消按钮
  function cancel() {
    open.value = false;
    showImportSku.value = false;
    reset();
  }

  // 表单重置
  function reset() {
    form.value = {
      skuId: null,
      skuName: null,
      skuImage: null,
      brandName: null,
      unit: null,
      price: null,
      classId: null,
      isDiscount: null,
      createTime: null,
      updateTime: null
    };
    proxy.resetForm('skuRef');
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm('queryRef');
    handleQuery();
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.skuId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = '添加商品管理';
  }

  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    const _skuId = row.skuId || ids.value;
    getSku(_skuId).then((response) => {
      form.value = response.data;
      form.value.price /= 100;
      open.value = true;
      title.value = '修改商品管理';
    });
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs['skuRef'].validate((valid) => {
      if (valid) {
        form.value.price *= 100;
        if (form.value.skuId != null) {
          updateSku(form.value).then((_response) => {
            proxy.$modal.msgSuccess('修改成功');
            open.value = false;
            getList();
          });
        } else {
          addSku(form.value).then((_response) => {
            proxy.$modal.msgSuccess('新增成功');
            open.value = false;
            getList();
          });
        }
      }
    });
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _skuIds = row.skuId || ids.value;
    proxy.$modal
      .confirm('是否确认删除商品管理编号为"' + _skuIds + '"的数据项？')
      .then(function () {
        return delSku(_skuIds);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess('删除成功');
      })
      .catch(() => {});
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download(
      'manage/sku/export',
      {
        skuIds: ids.value.join(',') // 逗号拼接 Array.from(ids.value)
      },
      `sku_${new Date().getTime()}.xlsx`
    );
  }

  /** 导入按钮操作 */
  const showImportSku = ref(false);
  function handleImport() {
    title.value = '数据导入';
    showImportSku.value = true;
  }

  /* 上传地址 */
  const uploadExcelUrl = ref(import.meta.env.VITE_APP_BASE_API + '/manage/sku/import'); // 上传excel文件地址
  /* 上传请求头 */
  const headers = ref({ Authorization: 'Bearer ' + getToken() });

  /* 上传excel */
  const uploadRef = ref<UploadInstance>();
  function submitUpload() {
    uploadRef.value!.submit();
  }

  const props = defineProps({
    modelValue: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 1
    },
    // 文件类型, 例如["xls", "xlsx"]
    fileType: {
      type: Array,
      default: () => ['xls', 'xlsx']
    }
  });

  // 上传前loading加载
  function handleBeforeUpload(file) {
    let isExcel = false;
    if (props.fileType.length) {
      let fileExtension = '';
      if (file.name.lastIndexOf('.') > -1) {
        fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
      }
      isExcel = props.fileType.some((type) => {
        if (file.type.indexOf(type) > -1) return true;
        if (fileExtension && fileExtension.indexOf(type as any) > -1) return true;
        return false;
      });
    }
    if (!isExcel) {
      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
      return false;
    }
    if (props.fileSize) {
      const isLt = file.size / 1024 / 1024 < props.fileSize;
      if (!isLt) {
        proxy.$modal.msgError(`上传excel大小不能超过 ${props.fileSize} MB!`);
        return false;
      }
    }
    proxy.$modal.loading('正在上传excel，请稍候...');
  }

  // 上传失败
  function handleUploadError() {
    proxy.$modal.msgError('上传excel失败');
    uploadRef.value!.clearFiles();
    proxy.$modal.closeLoading();
  }

  // 上传成功回调
  function handleUploadSuccess(res, _file) {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('上传excel成功');
      showImportSku.value = false;
      getList();
    } else {
      proxy.$modal.msgError(res.msg);
    }
    uploadRef.value!.clearFiles();
    proxy.$modal.closeLoading();
  }

  onMounted(() => {
    getSkuClassList();
    getList();
  });
</script>
<style lang="scss" scoped>
  :deep(.input-width.el-input) {
    width: 340px;
  }
  :deep(.select-width.el-select) {
    width: 340px;
  }
  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
    margin-top: 5px;
  }
  :deep(.el-upload-list__item.is-success) {
    max-width: 100px;
    max-height: 100px;
    margin-top: 5px;
  }
  :deep(.el-upload-list__item.is-ready) {
    width: auto;
    max-height: 100px;
    margin-top: 5px;
  }
  .el-upload__tip {
    text-align: center;
    font-size: 15px;
    color: #ff007f;
  }
</style>
